<template>
  <div class="h-100p">
    <el-menu :default-active="activeRouter" mode="horizontal" class="bdr-top-10" in>
      <el-menu-item v-for="item in tabs" :key="item" :index="item">{{item}}</el-menu-item>
    </el-menu>
    <v-plain-table :native="{stripe:true}" :data="members" @change="change">
      <template slot="expand" slot-scope="{scope}">
        <el-button type="text">审核</el-button>
        <el-button type="text" @click="$router.push(`/salesman/detail/${scope.row.id}/process-0`)">详情</el-button>
      </template>
    </v-plain-table>
  </div>
</template>
<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'
  import vPlainTable from '@/components/plain-table'

  @Component({
    components: {
      vPlainTable
    }
  })
  export default class Memberships extends Vue {
    get activeRouter () {
      return this.$route.path
    }

    members: TableData = {
      header: [
        {
          label: '账号',
          key: 'username'
        },
        {
          label: 'id',
          key: 'enterpriseUserId'
        },
        {
          label: '姓名',
          key: 'realName'
        },
        {
          label: '联系方式',
          key: 'contactInformation'
        },
        {
          label: '创建日期',
          key: 'createTime',
          formatter: row => this.$utils.toTimeFormat(row.createTime)
        },
        {
          label: '最后登录',
          key: 'date',
          formatter: row => this.$utils.toTimeFormat(row.lastLoginTime)
        }
      ],
      body: [],
      footer: {
        total: 0,
        currentPage: 1
      }
    }

    tabs = [
      '全部会员',
      '实名认证',
      '业务授权',
      '对公账户绑定',
      '认证完成'
    ]

    async getMemberList () {
//todo
      let res: AjaxResponse = await  this.$axios.post('b/boms/member/channelsalesman/members', {
        currentPage: this.members.footer.currentPage,
        pageSize: 10,
        userId: this.$route.params.id
      })
      this.members.body = res.data.items
      this.members.footer.total = res.data.totalNum
      this.members.footer.currentPage = res.data.currentPage

    }

    mounted () {
      this.getMemberList()
    }

    change () {}
  }
</script>
<style lang="less" scoped>
  .h-100p {
    display: flex;
    flex-direction: column;
  }

  .bdr-bottom-10 {
    margin-top: 10px;
  }
</style>
